<template>
  <div class="basepage-report">
    <div class="panel-search-top">
      <div class="form">
        <el-form ref="form" :inline="true" size="mini">
          <el-form-item label-width="0px">
            <el-input placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button type="primary">查询</el-button>
          </el-form-item>
          <el-form-item label="类别" label-width="60px">
            <el-select placeholder="类别" value="">
              <el-option label="类别" value="类别"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div class="button-group-operate">
        <el-button icon="el-icon-new" @click="handleAdd() ">新增</el-button> 
        <el-button icon="el-icon-editor" @click="handleAdd(1)">编辑</el-button>
        <el-button icon="el-icon-delete" @click="dialogDelete=true">删除</el-button>
        <el-button icon="el-icon-export" @click="dialogExport=true">导出</el-button>
      </div>
    </div>

    <el-tabs class="base-tabs" v-model="tabs.isActive">
      <el-tab-pane label="告警" name="tab1">
        <div class="pagecontent">
          <div class="panel">
            <div class="panel-con">
              <div v-if="viewFlag==1" class="datalist">
                <el-table :data="json.portraitC1" @row-click="rowclick">
                  <el-table-column prop="c1" label="序号"></el-table-column>
                  <el-table-column prop="c2" label="名称"></el-table-column>
                  <el-table-column prop="c3" label="报表类型"></el-table-column>
                  <el-table-column prop="c1" label="报表对象"></el-table-column>
                  <el-table-column prop="c2" label="更新时间"></el-table-column>
                </el-table>
                <div class="compage">
                  <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
                </div>
              </div>
              <div v-if="viewFlag==2" class="echartpanel">
                <diagram-echarts :data="diagramEcharts.c1" :show="diagram.c1" bg="#fff" type="style4"></diagram-echarts>
              </div>
            </div>
          </div>
        </div>

      </el-tab-pane>
      <el-tab-pane label="预警" name="tab2">预警</el-tab-pane>
      <el-tab-pane label="处置统计" name="tab3">处置统计</el-tab-pane>
      <el-tab-pane label="趋势预测" name="tab4">趋势预测</el-tab-pane>

    </el-tabs>

    <el-dialog :title="`${dialogAddTitle}报表`" width="650px" :visible.sync="dialogAdd">
      <el-form ref="form" label-width="136px" label-position="right" size="mini">
        <el-form-item label="名称">
          <el-input v-model="dialogAddForm.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对象">
          <el-select placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>&nbsp;
          <el-select placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起止时间">
          <el-date-picker type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报表指标">
          <el-select placeholder="请选择类别">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="X轴">
          <el-select placeholder="请选择类别">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Y轴起">
          <el-col :span="9">
            <el-input></el-input>
          </el-col>
          <el-col class="line" :span="1">至</el-col>
          <el-col :span="9">
            <el-input></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="buttonlist base-dialog-bom-btn-c">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogAdd = false" >取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
<el-dialog title="提示" width="650px" :visible.sync="dialogDelete">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
         是否删除当前所选数据
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogDelete = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" width="650px" :visible.sync="dialogSave">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
          是否保存当前页面
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogSave = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog><el-dialog title="请先命名导出文件" width="650px" :visible.sync="dialogExport">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="报表名称">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogExport = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Data from "../../data/index";
import diagramEcharts from "../../components/portrait/echarts";

export default {
  name: "",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },
      tabs: {
        isActive: "tab1"
      },
      viewFlag: 1, //1 列表  2图表
      dialogAdd: false,dialogAddTitle:'创建',dialogDelete:false,dialogSave:false,dialogInport:false,dialogExport:false,
      json: {
        portraitC1: Data.portraitC1
      },
      diagram: {
        c1: true
      },
      diagramEcharts: {
        c1: {
          yname: "个/秒",
          color: ["#64A9ED"],
          isboundaryGap: true,
          xAxisData: [
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00",
            "06/01 12:00"
          ],
          series: [
            {
              type: "bar",
              barWidth: 22,
              data: [25, 10, 23, 10, 15, 15, 25, 10],
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#64A9ED" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#7AC3FD" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        }
      }
    };
  },
  components: {
    diagramEcharts
  },
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){
        alert('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        alert("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        alert('备注信息最大不超30个中文字符');
        return;
      }

    },
    handleAdd(type)  {
      this.dialogAdd = true;if(type==1){this.dialogAddTitle="编辑";}
    },
    rowclick() {
      this.viewFlag = 2;
      console.log("aaaa");
    }
  }
};
</script>

<style lang="scss" >
@import url(../../assets/css/base.css);
.el-dialog__body .el-input--mini .el-input__inner {
  width: 206px;
}

</style>
 
<style scoped lang="scss">
.echartpanel {
  height: 400px;
}
.button-group-operate {
  float: right;
}
.form {
  float: left;
}
.appright {
  background: #fff;
}
.pagecontent {
  padding: 20px;
}
</style>
